<template>
	<div class="list-config">
        <div class="list-info">列表配置仅限使用列表模式使用，如不需要使用列表模式请忽略此设置</div>
        <div class="form-item-box clearfix">
            <div class="form-item-left" :class="{'require-item':$store.state.shares.implantApp}">列表缩略图:</div>
            <div class="form-item-right rule-box">
                <div style="display:inline-block; vertical-align: middle;">
                    <div class="upload-img-list">
                        <p  v-show="!$store.state.listConfig.list_background_img" >
                            <input type="file" 
                                @change='addImgEvent'
                                accept="image/png, image/jpeg, image/jpg"
                                v-show="!ImportLoading"> 
                            <img v-show="ImportLoading" class="load-gif" src="./../../../assets/img/qr_code.gif">
                        </p>
                        <p v-show="$store.state.listConfig.list_background_img" class="p_img">
                            <img :src="$store.state.listConfig.list_background_img" />
                            <i class="fa fa-times" 
                            aria-hidden="true"
                            v-show="$store.state.listConfig.list_background_img"  @click="cancelBanner()"></i>
                        </p>
                    </div>
                    <p style="font-size:12px;">PNG、JPG格式，小于200KB</p>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
	import { baseImgPath } from './../../../config/env'
	import * as api from './../../../api/api';
	import Vue from 'vue'
	import { Message,Loading} from 'element-ui';    
	export default {
		data(){
			return {
                ImportLoading:false, //上传图片
            }
		},
		watch:{
			
		},
		mounted(){
		
		},  
        methods: {
		
            //删除选择的图片
			cancelBanner(){
                this.$store.state.listConfig.list_background_img= '';
			},
			//上传图片
			addImgEvent(event){
				var vm = this;
				vm.ImportLoading=true;
	            var img1 = event.target.files[0];
				//生成临时图片路径
                var temSrc = URL.createObjectURL(img1);
	            var size = img1.size/1024;
				if(size>300){
					vm.ImportLoading=false;
					vm.$message({
					showClose: true,
					type: 'error',
					message: '图片大小不能大于200KB'
					}); 
					return false;  
				}
				var _img = new Image();
        		_img.onload = function  () { 
        			var imgWidth = _img.width,
        				imgHeight = _img.height; 
					
					let formdata = new FormData();
					formdata.append('upfile', img1);
                    api.uploadPrizeImg(formdata).then(res => {
                        vm.$message({
                            message: '上传成功',
                            type: 'success'
                        }); 
                        vm.ImportLoading=false;
                        vm.$store.state.listConfig.list_background_img= res.data.result;
                    }).catch(err=>{
                        vm.httpStatusCode(err); 
                        vm.ImportLoading=false;
                    })   
					setTimeout(function  () {
			        	URL.revokeObjectURL(temSrc);
			        },100);
				}
				_img.src = temSrc;
                event.target.value='';
			}
        }
	}
</script>
<style>
	/* 修改输入框样式 */
	.pick-date-box .el-input__inner{
		height: 34px;
		box-sizing: border-box;
		border-radius: 0;
		background-color: #f4f8fb;
	    color: #888;
	    border: 1px solid #efefef;
	    box-shadow: none;
	    font-size: 12px;
	    width: 100%;
        height: 34px;
        padding: 6px 12px;
        box-sizing: border-box;
	}
	.special-item .el-input__inner{
		height: 32px;
		box-sizing: border-box;
		border-radius: 0;
		background-color: #f4f8fb;
	    color: #888;
	    border: 1px solid #efefef;
	    box-shadow: none;
	    font-size: 12px;
	    width: 109px;
        padding: 6px 12px;
        box-sizing: border-box;
	}
	.special-item .el-date-editor i{
		display: none;
	}
	.special-item .el-select .el-input__inner{
		padding-right: 25px;
		width:130px;
	}
	.lotteryNum-box .el-input__inner{
		width:142px;
		box-sizing: border-box;
		border-radius: 0;
		height: 34px;
		font-size: 12px;
	    color: rgb(136, 136, 136);
	    border-color: rgb(239, 239, 239);
	    background-color: rgb(238, 238, 238);
	}
	.tag-box .el-input__inner{
		width:160px;
	}
	.tag-box .el-input{
	}
	.rule-box .ql-container{
		height: 300px;
		background: #f4f8fb;
	}
	.share-switch .el-switch{
		position: relative;
		top:-1px;
	}
	.rule-title .el-switch{
		top:-1px;
		left: 10px;
	}
	.el-switch__label span{
		color:rgba(0,0,0,0);
	}
</style>
<style lang="less" scoped>
	@import '../../../style/setTemplate'; 
    .list-info{
        font-size:14px;
        color:#666;
        margin:10px 0;
    }
    .upload-img-list p{
        width:100px;
        height: 100px;
        line-height: 98px;
        border: 1px solid #eeeeee;
        margin: 0 10px 20px;
        text-align: center;
        font-size: 30px;
        color: #aaaaaa;
        position: relative; 
        .load-gif{
            position:absolute;
            top:35px;
            left:35px;
            width:25px;
            height:25px;
        }
    }
    .upload-img-list p:first-child{
        position: relative;
    }
    .upload-img-list p:first-child:before{
        content:'+';
    }
    .upload-img-list p input{
        cursor: pointer;
        display: block;
        opacity: 0;
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
    }
    .upload-img-list p:not(:first-child){
        -webkit-background-size: contain;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .upload-img-list .p_img{
        position:relative;
        border:none; 
    }
    .upload-img-list p img{
        width:100%;
        height: 100%;
    }
    .upload-img-list .p_img .fa-times{
        position: absolute;
        top: 0 !important;
        right:-13px;
        font-size: 14px;
        color:#888888;
        cursor: pointer;
    }
    .upload-img-list .p_img .fa-times:hover{
        opacity: 0.8;
    }
</style>